<template>
  <el-card ref="cardcontainer"
           shadow="never"
           :id="id"
           v-loading="loading"
           :style="{height: gadgetHeight + 'px',width: '100%'}"
           class="aui-card--fill">
    <!--<div slot="header" class="clearfix" :style="{backgroundColor:gadgetSetting.cardSetting.headerBackGroundColor}" style="line-height: 30px;">
        <span  :style="{color:gadgetSetting.cardSetting.headerColor,fontSize:gadgetSetting.cardSetting.headerFontSize}" style="margin: 10px 10px;font-weight:bold;">
                        {{gadgetSetting.cardSetting.headerTitle}}</span>
        <el-tooltip :open-delay="1000"  effect="dark" :content="gadgetSetting.cardSetting.toolTipContent" >
            <i class="cuifont icon_help_circle" :style="{color:gadgetSetting.cardSetting.headerColor,fontSize:gadgetSetting.cardSetting.headerFontSize}" style="float: right;margin: 10px 10px;"></i>
        </el-tooltip>
      </div>-->
    <div>
      <div class="cardHeader"
           @mouseenter="mouseenter(true)"
           @mouseleave="mouseenter(false)"
           v-if="(gadgetSetting.headerTitle && gadgetSetting.headerTitle.trim().length>0) || (gadgetSetting.headerDescription && gadgetSetting.headerDescription.trim().length>0)">
        <span>
          <span class="cardTitle threepoints"
                :title="gadgetSetting.headerTitle"
                v-if='gadgetSetting.headerTitle && gadgetSetting.headerTitle.trim().length>0'>{{ gadgetSetting.headerTitle }}</span>
          <el-tooltip :open-delay="1000"
                      class="item"
                      effect="dark"
                      :content="gadgetSetting.headerDescription"
                      placement="right"
                      v-if='gadgetSetting.headerDescription && gadgetSetting.headerDescription.trim().length>0'>
            <i class="cuifont icon_help_circle cardIcon"></i>
          </el-tooltip>
        </span>
        <MoreMenu :slicer='slicer'
                  :gadgetId='id'
                  :gadgetType='gadgetInfo.com'
                  @updateQuery="query"
                  @fullScreen="fullScreen" />
      </div>
      <div>
        <el-row justify="space-around"
                type="flex">
          <el-col :span="12"
                  style="text-align: center;margin:0;">
            <div class="grid-content bg-purple">
              <p>{{ gadgetSetting.cardSetting.GoalTitle }}</p>
              <div :style="{color:gadgetSetting.cardSetting.GoalColor,fontSize:gadgetSetting.cardSetting.GoalFontSize}">
                {{ gadgetSetting.cardSetting.GoalValue }}
              </div>
            </div>
          </el-col>
          <el-col :span="12"
                  style="text-align: center;margin:0;">
            <div class="grid-content bg-purple">
              <p>{{ gadgetSetting.cardSetting.cardTitle }}</p>
              <div :style="{color:gadgetSetting.cardSetting.cardColor,fontSize:gadgetSetting.cardSetting.cardFontSize}">
                {{ datasource.cardValue }}
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top:5px;">
        <ejs-chart ref=linechart
                   theme='Material'
                   align='center'
                   style='display:block;'
                   :title='gadgetSetting.lineSetting.title'
                   :style="{height: gadgetHeight-160 + 'px'}"
                   :primaryXAxis='gadgetSetting.lineSetting.primaryXAxis'
                   :primaryYAxis='gadgetSetting.lineSetting.primaryYAxis'
                   :tooltip='gadgetSetting.lineSetting.tooltip'
                   :chartArea='gadgetSetting.lineSetting.chartArea'
                   :width='chartWidth'>
          <e-series-collection>
            <e-series :dataSource='linedataSource'
                      :type='gadgetSetting.lineSetting.type'
                      xName='x'
                      yName='y'
                      :name='gadgetSetting.lineSetting.name'
                      width=2
                      :marker='gadgetSetting.lineSetting.marker'></e-series>
          </e-series-collection>
        </ejs-chart>
      </div>
    </div>
    <model :showSetting="queryModelDefaultSetting.showSetting"
           @queryModelClosed="queryModelClosed"
           :dataInfo="queryModelDefaultSetting.dataInfo"
           :updateGadget="upgradeGadgetSetting" />
  </el-card>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'

import { defaultGadgetSettingList } from '@/utils/data-json'
export default ({
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model') },
  data: function () {
    return {
      datasource: {
        cardValue: 0,
        linedataSource: {}
      },
      linedataSource: {},
      loading: false,
      chartWidth: '600px',
      gadgetSetting: {},
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: 'cardlinegadget',
          gadgetSetting: this._.find(defaultGadgetSettingList, { gadgetType: 'cardlinegadget' }).gadgetSetting
          // gadgetSetting: {
          //   cardSetting: {
          //     headerTitle: 'Revenue',
          //     headerColor: '#666666',
          //     headerBackGroundColor: '#F8F8F8',
          //     headerFontSize: '20px',
          //     GoalTitle: 'Goal',
          //     GoalValue: 0,
          //     GoalColor: 'red',
          //     GoalFontSize: '20px',
          //     cardTitle: 'Actual',
          //     cardColor: 'green',
          //     cardFontSize: '20px',
          //     toolTipContent: ''
          //   },
          //   lineSetting: {
          //     width: 500,
          //     type: 'Line',
          //     xName: '',
          //     yName: '',
          //     name: '',
          //     title: '',
          //     primaryXAxis: {
          //       title: 'Months',
          //       valueType: 'DateTime',
          //       labelFormat: 'YY/MM',
          //       intervalType: 'Months',
          //       edgeLabelPlacement: 'Shift',
          //       majorGridLines: {
          //         width: 0
          //       }
          //     },
          //     primaryYAxis: {
          //       title: '',
          //       labelFormat: 'P',
          //       rangePadding: 'None',
          //       lineStyle: {
          //         width: 0
          //       },
          //       majorTickLines: {
          //         width: 0
          //       },
          //       minorTickLines: {
          //         width: 0
          //       }
          //     },
          //     chartArea: {
          //       border: {
          //         width: 0
          //       }
          //     },
          //     marker: {
          //       visible: true,
          //       height: 10,
          //       width: 10
          //     },
          //     tooltip: {
          //       enable: true
          //     }
          //   },
          //   headerTitle: '',
          //   headerDescription: ''
          // }
        }
      },
      layoutW: null
    }
  },

  created () {
    this.gadgetHeight = (this.gadgetInfo.h * 20) - 20
    this.query()
    this.subscribeMessage('runReport', this.query)
    this.$store.state.isWidget = false
  },
  methods: {
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    upgradeGadgetSetting (setting) {
      if (!setting.cardSetting.toolTipContent) {
        setting.cardSetting.toolTipContent = 'text'
      }
      // minimum: 0,
      // maximum: 100,
      // interval: 20,
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = (newH * 20) - 20
      this.gadgetWidth = newWPx
      this.chartWidth = (newWPx - 10) + 'px'
    },
    containerResizedEvent (i, newH, newW, newHPx, newWPx) {
      this.chartWidth = (newWPx - 10) + 'px'
    },
    query () {
      this.gadgetSetting = this.queryModelDefaultSetting.dataInfo.gadgetSetting
      this.loading = true
      var _self = this
      var param = {
        ...this.slicer,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        pageId: this.pageId,
        gadgetId: this.id,
        filter: this.getFilterStr(),
        type: this.filterType
      }
      this.$interface.reports.getReportDataInfo(param).then(({ data: res }) => {
        if (res.config) {
          _self.gadgetSetting = res.config
          _self.upgradeGadgetSetting(_self.gadgetSetting)
        }
        if (res.data && res.data.length > 0) {
          _self.datasource.linedataSource = res.data
          _self.linedataSource = res.data
          if (res.data[0].cardValue) {
            _self.datasource.cardValue = _self._.round((res.data[0].cardValue) * 100) + '%'
          } else {
            _self.datasource.cardValue = _self._.round((res.data[0].y) * 100) + '%'
          }
          _self.afterQuery()
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    afterQuery () {
      var max = this._.maxBy(this.linedataSource, function (o) {
        return o.y
      })
      var min = this._.minBy(this.linedataSource, function (o) {
        return o.y
      })
      this.gadgetSetting.lineSetting.primaryYAxis.maximum = max.y
      this.gadgetSetting.lineSetting.primaryYAxis.minimum = min.y
      this.gadgetSetting.lineSetting.primaryYAxis.interval = this._.ceil(this._.divide([(max.y - min.y), 5]))
    }
  }
})
</script>
<style scoped>
.el-card ::v-deep .el-card__body {
  padding: 0px !important;
}

.el-card ::v-deep .el-divider--horizontal {
  margin: 3px 0 !important;
}

.threepoints {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.cardHeader > span {
  display: inline-block;
  width: calc(100% - 30px);
}

.cardTitle {
  font-size: 16px;
  color: #000;
  font-weight: 700;
  display: inline-block;
  max-width: calc(100% - 30px);
  position: relative;
  top: 2px;
}

.cardIcon {
  font-size: 16px;
  font-weight: 600;
  margin-left: 10px;
  position: relative;
  top: -2px;
}
</style>
